{% extends "base.html" %}
{% load static %}
{% load analysis_filters %}

{% block title %}学习进度追踪 - ExamPulse{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'analysis/css/learning_progress.css' %}">
{% endblock %}

{% block content %}
<div class="container mt-4 mb-5">
    <!-- 页面头部 -->
    <div class="learning-progress-header fade-in-up">
        <div class="row align-items-center">
            <div class="col-md-8">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="{% url 'analysis:profile_dashboard' %}">知识点画像</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">学习进度</li>
                    </ol>
                </nav>
                <h1 class="mb-2">
                    <i class="fas fa-chart-line me-2"></i>学习进度追踪
                </h1>
                <p class="mb-0 opacity-75">
                    追踪您的学习活动，分析学习习惯与进步趋势
                </p>
            </div>
            <div class="col-md-4 text-md-end">
                <div class="btn-group">
                    <a href="{% url 'analysis:profile_dashboard' %}" class="btn btn-light btn-sm">
                        <i class="fas fa-arrow-left me-1"></i>返回仪表板
                    </a>
                    <button id="exportProgressData" class="btn btn-light btn-sm">
                        <i class="fas fa-download me-1"></i>导出数据
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 时间范围选择器 -->
    <div class="time-range-selector fade-in-up" data-current-days="{{ days }}">
        <div class="card-header" style="border: none; padding: 0 0 1rem 0; margin: 0;">
            <h3 class="card-title mb-0">
                <i class="fas fa-calendar-alt text-primary me-2"></i>时间范围选择
            </h3>
        </div>
        <div class="range-buttons">
            <a href="?days=7" class="range-btn {% if days == 7 %}active{% endif %}" data-days="7">最近7天</a>
            <a href="?days=30" class="range-btn {% if days == 30 %}active{% endif %}" data-days="30">最近30天</a>
            <a href="?days=90" class="range-btn {% if days == 90 %}active{% endif %}" data-days="90">最近90天</a>
            <a href="?days=180" class="range-btn {% if days == 180 %}active{% endif %}" data-days="180">最近180天</a>
            <a href="?days=365" class="range-btn {% if days == 365 %}active{% endif %}" data-days="365">最近1年</a>
        </div>
        <div class="mt-2 text-muted small">
            <i class="fas fa-info-circle me-1"></i>
            数据范围：{{ start_date }} 至 {% now "Y-m-d" %}
        </div>
    </div>

    <!-- 总体统计 -->
    <div class="progress-stats-grid fade-in-up">
        <div class="progress-stat-card">
            <div class="progress-stat-icon bg-success">
                <i class="fas fa-book-open"></i>
            </div>
            <div class="progress-stat-value text-success">{{ total_stats.total_practices }}</div>
            <div class="progress-stat-label">总练习次数</div>
        </div>
        
        <div class="progress-stat-card">
            <div class="progress-stat-icon bg-primary">
                <i class="fas fa-check-circle"></i>
            </div>
            <div class="progress-stat-value text-primary">{{ total_stats.correct_practices }}</div>
            <div class="progress-stat-label">正确练习次数</div>
        </div>
        
        <div class="progress-stat-card">
            <div class="progress-stat-icon bg-info">
                <i class="fas fa-layer-group"></i>
            </div>
            <div class="progress-stat-value text-info">{{ total_stats.subjects_covered }}</div>
            <div class="progress-stat-label">涉及科目数量</div>
        </div>
        
        <div class="progress-stat-card">
            <div class="progress-stat-icon bg-warning">
                <i class="fas fa-bullseye"></i>
            </div>
            <div class="progress-stat-value text-warning">{{ total_stats.knowledge_points_covered }}</div>
            <div class="progress-stat-label">覆盖知识点</div>
        </div>
        
        <div class="progress-stat-card">
            <div class="progress-stat-icon bg-purple">
                <i class="fas fa-calendar-check"></i>
            </div>
            <div class="progress-stat-value text-primary">{{ total_stats.study_days }}</div>
            <div class="progress-stat-label">学习天数</div>
        </div>
    </div>

    <!-- 学习洞察 -->
    {% if learning_activities %}
    <div class="learning-insights fade-in-up">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fas fa-lightbulb text-warning"></i>学习洞察
            </h3>
        </div>
        <div class="insight-grid">
            <div class="insight-item border-success" id="consecutive-days">
                <div class="insight-title">学习坚持</div>
                <div class="insight-value">计算中...</div>
                <p class="insight-description">连续学习天数</p>
            </div>
            
            <div class="insight-item border-primary" id="avg-accuracy">
                <div class="insight-title">学习质量</div>
                <div class="insight-value">计算中...</div>
                <p class="insight-description">平均准确率</p>
            </div>
            
            <div class="insight-item border-info" id="best-day">
                <div class="insight-title">最佳表现</div>
                <div class="insight-value">计算中...</div>
                <p class="insight-description">单日最高练习量</p>
            </div>
            
            <div class="insight-item border-warning">
                <div class="insight-title">学习频率</div>
                <div class="insight-value">
                    {% widthratio total_stats.study_days days 100 %}%
                </div>
                <p class="insight-description">时间范围内学习天数占比</p>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- 学习活动日历 -->
    {% if learning_activities %}
    <div class="learning-activities-card fade-in-up">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fas fa-calendar-day text-success"></i>学习活动日历
            </h3>
        </div>
        
        <div class="activity-calendar">
            {% for activity in learning_activities %}
            <div class="activity-day {% if forloop.last %}active{% endif %}" data-date="{{ activity.date }}">
                <div class="day-date">{{ activity.date }}</div>
                <div class="day-stats">
                    <div class="day-stat">
                        <span>练习:</span>
                        <span class="day-stat-value">{{ activity.total_practices }}</span>
                    </div>
                    <div class="day-stat">
                        <span>准确率:</span>
                        <span class="day-stat-value">{{ activity.accuracy|multiply:100|floatformat:1 }}%</span>
                    </div>
                    <div class="day-stat">
                        <span>科目:</span>
                        <span class="day-stat-value">{{ activity.subjects_count }}</span>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- 详细活动列表 -->
    <div class="activity-list fade-in-up">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fas fa-list-ol text-primary"></i>详细学习记录
            </h3>
        </div>
        
        <div class="table-responsive">
            <table class="activity-table">
                <thead>
                    <tr>
                        <th>日期</th>
                        <th>练习次数</th>
                        <th>准确率</th>
                        <th>涉及科目</th>
                        <th>学习趋势</th>
                    </tr>
                </thead>
                <tbody>
                    {% for activity in learning_activities %}
                    <tr>
                        <td>{{ activity.date }}</td>
                        <td>{{ activity.total_practices }}</td>
                        <td>
                            <div class="accuracy-indicator">
                                <div class="accuracy-bar">
                                    <div class="accuracy-fill" data-accuracy="{{ activity.accuracy }}"></div>
                                </div>
                                <span class="accuracy-value">{{ activity.accuracy|multiply:100|floatformat:1 }}%</span>
                            </div>
                        </td>
                        <td>{{ activity.subjects_count }} 个科目</td>
                        <td>
                            {% if forloop.counter0 > 0 %}
                                {% with prev_activity=learning_activities|index:forloop.counter0|add:"-1" %}
                                    {% if activity.total_practices > prev_activity.total_practices %}
                                        <span class="trend-indicator trend-up">
                                            <i class="fas fa-arrow-up"></i>
                                            上升
                                        </span>
                                    {% elif activity.total_practices < prev_activity.total_practices %}
                                        <span class="trend-indicator trend-down">
                                            <i class="fas fa-arrow-down"></i>
                                            下降
                                        </span>
                                    {% else %}
                                        <span class="trend-indicator trend-stable">
                                            <i class="fas fa-minus"></i>
                                            平稳
                                        </span>
                                    {% endif %}
                                {% endwith %}
                            {% else %}
                                <span class="trend-indicator trend-stable">-</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- 图表区域 -->
    <div class="learning-activities-card fade-in-up">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fas fa-chart-bar text-info"></i>学习趋势图表
            </h3>
        </div>
        
        <div class="chart-container">
            <canvas id="activityTrendChart"></canvas>
        </div>
        
        <div class="chart-container">
            <canvas id="accuracyTrendChart"></canvas>
        </div>
    </div>

    {% else %}
    <!-- 空状态 -->
    <div class="empty-state fade-in-up">
        <div class="empty-icon">
            <i class="fas fa-chart-line"></i>
        </div>
        <h3 class="empty-title">暂无学习活动数据</h3>
        <p class="empty-description">
            在选定的时间范围内没有找到学习活动记录。
        </p>
        <div class="d-flex gap-2 justify-content-center">
            <a href="?days=90" class="btn btn-primary">
                <i class="fas fa-search me-1"></i>查看更长时间范围
            </a>
            <a href="{% url 'score:score_list' %}" class="btn btn-outline-secondary">
                <i class="fas fa-book me-1"></i>开始学习
            </a>
        </div>
    </div>
    {% endif %}
</div>

<!-- 隐藏的数据用于JavaScript -->
<script id="activityData" type="application/json">
{{ learning_activities|json_script:"activityData" }}
</script>
<script id="totalStatsData" type="application/json">
{{ total_stats|json_script:"totalStatsData" }}
</script>
{% endblock %}

{% block extra_js %}
<script src="{% static 'analysis/js/learning_progress.js' %}"></script>
{% endblock %}